<template>
	<!-- 运营系统-短剧审核列表 -->
	<d2-container class="d-flex flex-column">
		<template v-if="$hasPermission('playlet:playlet:index')">
			<div class="d-flex j-sb" slot="header">
				<el-form class="d-flex b-s mt-2 mb-10" :inline="true" size="small" :model="dataForm"
					@keyup.enter.native="getTableList(true)" @submit.native.prevent>
					<el-form-item label="短剧名称">
						<el-input v-model="dataForm.keyword" placeholder="短剧名称" clearable />
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-search" type="primary"
							@click="getTableList(true)">查询</el-button>
					</el-form-item>
				</el-form>
				<div class="d-flex">
					<vxe-toolbar ref="toolbarRef" custom :refresh="{ queryMethod: getTableList,code:'query'}"></vxe-toolbar>
				</div>
			</div>
			<div class="d-flex h-100 b-s flex-column">
				<div class="d-flex flex-1">
					<div class="overflow">
						<vxe-table ref="playletExamineTable" key="playletExamineTable" border height="100%" resizable size="medium"
							:loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}"
							:data="dataList">
							<vxe-column width="100" field="id" title="ID" sortable align="center"></vxe-column>
							<vxe-column width="200" field="name" title="短剧名称" align="center"></vxe-column>
							<vxe-column width="120" field="cover" title="短剧封面图" align="center">
								<template v-slot="{ row }">
									<img class="pointer" width="80" height="auto" :src="row.cover" style="border-radius: 5px;"
										@click.stop="previewPicFn(row)">
								</template>
							</vxe-column>
							<vxe-column width="300" field="introduction" title="简介" align="center"></vxe-column>
							
							<vxe-column width="150" field="drama_status_name" title="微信剧目审核状态" align="center"></vxe-column>
							<vxe-column width="150" field="album_status_name" title="抖音剧目审核状态" align="center">
								<template v-slot="{ row }">
									<div style="display: flex;align-items: center;justify-content: center;">
										{{row.album_status_name}}
										<el-popover
											v-if="row.album_status == 3"
											placement="right"
											width="600"
											trigger="click">
											<el-table :data="diytable" border>
												<!-- <el-table-column width="250" prop="scope_list" label="能力列表"></el-table-column> -->
												<el-table-column width="350" prop="album_msg" label="审核备注"></el-table-column>
											
											</el-table>
											<i @click="diyalbum_status_name(row)" slot="reference" class="el-icon-info"></i>
									
										</el-popover>
										
									</div>
							
								</template>
							</vxe-column>
							<vxe-column width="150" field="playet_episodes_count" title="总共集数" align="center"></vxe-column>
							<vxe-column width="150" field="is_finish_name" title="是否完结" align="center"></vxe-column>
							<vxe-column width="120" field="amount" title="价格" align="center"></vxe-column>
							
							<vxe-column width="120" field="pay_type_name" title="支付类型" align="center"></vxe-column>
							<vxe-column width="200" field="last_episode_name" title="最后集名称" align="center"></vxe-column>
							<vxe-column width="200" field="pay_start_cid" title="付费起始剧集id" align="center"></vxe-column>
							<vxe-column width="100" field="status_name" title="状态" align="center"></vxe-column>
							<vxe-column width="160" field="created_at" title="创建时间" sortable cell-type="string" align="center"></vxe-column>
							<vxe-column width="160" field="updated_at" title="更新时间" sortable cell-type="string" align="center"></vxe-column>
							
							<vxe-column v-if="!tableLoading||(dataList.length&&$hasPermissionNum(['playlet:playletExamine:replaceOnlineDrama','playlet:playletExamine:auditDrama','playlet:playletExamine:episodesIndex']))"
							title="操作" fixed="right" 
							:width="($hasPermissionNum(['playlet:playletExamine:replaceOnlineDrama','playlet:playletExamine:auditDrama','playlet:playletExamine:episodesIndex']))>=2?300:100" 
							align="center" cell-class-name="py-10">
								<template v-slot="{ row }">
									<el-button class="diybtn" size="small" round icon="el-icon-coordinate"
									v-if="$hasPermission('playlet:playletExamine:replaceOnlineDrama')&&row.drama_status==3"
									@click="sumbitReplace(row,1)" type="warning">微信替换审核</el-button>
									
									
									<el-button class="diybtn" size="small" round icon="el-icon-coordinate"
									v-if="$hasPermission('playlet:playletExamine:replaceOnlineDrama')&&row.album_status==3"
									@click="sumbitReplace(row,2)" type="warning">抖音替换审核</el-button>
									
									
									<el-button class="diybtn" size="small" round icon="el-icon-coordinate"
									v-if="$hasPermission('playlet:playletExamine:auditDrama')&&row.drama_status!=1 && row.drama_status!=3"
									@click="submitDxamine(row,1)" type="success">提交微信审核</el-button>
									
									
									<el-button class="diybtn" size="small" round icon="el-icon-coordinate"
									v-if="$hasPermission('playlet:playletExamine:auditDrama')&&row.album_status!=1 && row.album_status!=3"
									@click="submitDxamine(row,2)" type="success">提交抖音审核</el-button>
									
									
									<el-button class="diybtn" size="small" round icon="el-icon-coordinate"
									v-if="$hasPermission('playlet:playletExamine:episodesIndex')"
									@click="goEpisodes(row,1)" type="primary">微信剧集列表</el-button>
									
									<el-button class="diybtn" size="small" round icon="el-icon-coordinate"
									v-if="$hasPermission('playlet:playletExamine:episodesIndex')"
									@click="goEpisodes(row,2)" type="danger">抖音剧集列表</el-button>
									
								</template>
							</vxe-column>
							<template #empty>
								<div class="d-flex flex-row a-center j-center font-md">
									<div class="d-flex">
										暂时没有数据~
									</div>
								</div>
							</template>
						</vxe-table>
					</div>
				</div>
			</div>
			<!-- 分页 -->
			<div class="d-flex" slot="footer">
				<vxe-pager background size="medium" align="right" :border="false" :current-page="dataForm.page"
					:page-size="dataForm.pageSize" :total="total" :pageSizes="[20,50,100,150,200]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="handlePageChange">
				</vxe-pager>
			</div>
	
	
			<!-- 图片预览弹窗 -->
			<pic-preview v-if="picVisible" ref="picDialog"></pic-preview>
			
			<el-dialog v-if="dialogFormVisible" ref="mydialog" class="diydialog"  top="0px" left="0px"  title="" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
				<mydialog :dialogtype="dialogtype" :dialogid="dialogid" @closedialog="closedialog"  ></mydialog>
			</el-dialog>
			
	
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex b-s mt-2 mb-10" src="../../../public/image/download.png" alt="没有访问权限" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
	let that;
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mixinViewModule from '@/mixins/view-module'
	import PlayletAddOrUpdate from './playlet-add-or-update'
	import UploadAddOrUpdate from './upload-add-or-update'
	import mydialog from '../../components/episodesDialog/index.vue'
	import VideoView from './video-view'
	import PicPreview from './picPreview'
	export default {
		mixins: [mixinViewModule],
		components: {
			PlayletAddOrUpdate,
			UploadAddOrUpdate,
			PicPreview,
			VideoView,
			mydialog
		},
		data() {
			return {
				dialogid:0,
				dialogtype:1,
				dialogFormVisible: false,
				
				tableLoading:false,
				click_rowData:{},
				curent: 0,
				total: 0,
				curName: '',
				dataForm: {
					page: 1,
					pageSize: 20,
					keyword:'',//搜索
				},
				picVisible: false,
				// 增改
				addOrUpdateVisible: false,
				dataList: [],
				diytable:[]
			}
		},
		created() {
			if (this.$hasPermission('playlet:playlet:index')) {
				this.getTableList();
			}
		},
		mounted(){
			that = this;
		},
		computed: {
			...mapState('d2admin/user', [
				'info'
			])
		},
		methods: {
			...mapMutations({
				pageInit: 'd2admin/page/init',
				headerSet: 'd2admin/menu/headerSet'
			}),
			diyalbum_status_name(row){
				
				let arr = [];
				arr.push(row)
				this.diytable = arr
				console.log(253,this.diytable)
			},
			//预览图片
			previewPicFn(row) {
				this.picVisible = true;
				this.$nextTick(() => {
					this.$refs.picDialog.update(row.cover, row.name+' 封面图');
				})
			},
			async sumbitReplace(row,type){
				this.$confirm(`是否提交${type==1?'微信':type==2?'抖音':''}短剧剧目替换?`, '重要提示', {
					confirmButtonText: '确定',
				    cancelButtonText: '取消',
				    type: 'warning'
				}).then(() => {
					this.$axios.post(`/api/playlet/playletExamine/replaceOnlineDrama/${row.id}/${type}`).then(res=>{
						console.log(res);
						this.$message({
							message: '短剧剧目替换提交成功！',
							type: 'success',
							duration: 1500
						})
					});
				}).catch();
			},
			cellClickFn({row,columnIndex}){
				this.click_rowData = row;
			},
			closeVideoDialogFn() {
				console.log(this.player);
				if (this.player) {
					this.player.pause();
					this.player.seek(0);
				}
			},
			async getTableList(init=false) {
				if(init&&typeof init =='boolean'){
					this.dataForm.page = 1;
				}
				this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/playlet/playletExamine?'+this.$qs.stringify(this.dataForm))
				this.tableLoading = false;
				this.dataList = tableRes.data;
				this.total = tableRes.total;
			},
		
			//提交审核  key 1微信 2抖音
			async submitDxamine(row,key){
				console.log(row.id);
				this.$confirm('是否提交审核?', '重要提示', {
					confirmButtonText: '确定',
				    cancelButtonText: '取消',
				    type: 'warning'
				}).then(() => {
					this.$axios.post(`/api/playlet/playletExamine/auditDrama/${row.id}/${key}`, {}).then(res=>{
						this.getTableList();
						console.log(res);
						if(typeof res == 'object' && res!=null){
							if(res.code == 407) return;
						}
						this.$message({
							message: '提交审核成功！',
							type: 'success',
							duration: 1500
						})
					});
				}).catch();
			},
			
			goEpisodes(item,index){
				console.log(366,item.id,index,index==1?'微信':'抖音')
				this.dialogtype = index
				this.dialogid = item.id
				this.dialogFormVisible = true;
			},
	
			closedialog(){
				this.dialogFormVisible = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.vxe-cell .el-button){
		margin-bottom: 10px;
	}
	.diybtn{
		margin: 0 10px;
	}
	.diydialog{
		top: 82px;
	}
</style>
<style>
	.diydialog {
	    top: 82px;
	    left: 220px;
	    /* width: 100%; */
	    width: calc(100% - 220px);
	    height: calc(100% - 20px);
		z-index: 999999 !important;
	    /* background: red; */
	}
	.diydialog>.el-dialog{
		margin-top: 0px;
		width: calc(100% - 20px) !important;
		height: calc(100% - 63px) !important;
		margin: 0 !important;
	}
	.el-icon-info{
		font-size: 18px;
		margin-left: 5px;
	}
	.el-icon-info:hover{
		color: #409EFF;
		cursor: pointer;
	}
</style>